<template>
  <div class="app-container">
    <el-card class="box-card">
      <!-- 头部设置搜索的  -->
      <div slot="header" class="clearfix">
        <div style="flex: 7">
          <span class="subName">目录名称</span>
          <el-input v-model="pageNum.directoryName" class="subInput"></el-input>
          <span class="subName">状态</span>
          <el-select
            placeholder="请选择"
            v-model="pageNum.state"
            class="select"
          >
            <el-option label="启用" value="1"></el-option>
            <el-option label="禁用" value="0"></el-option>
          </el-select>
          <el-button plain @click="resetForm">清除</el-button>
          <el-button type="primary" @click="search">搜索</el-button>
        </div>
        <div style="flex: 1">
          <el-link
            v-if="isShow"
            type="primary"
            style="margin-right: 10px"
            @click="$router.push('/subjects/list')"
          >
            <i class="el-icon-back"></i>返回学科</el-link
          >
          <el-button type="success" class="addSub" @click="addSub">
            <i class="el-icon-edit"></i>
            新增目录</el-button
          >
        </div>
      </div>

      <!-- 这是消息提示 -->
      <el-alert type="info" show-icon :closable="false"
        >数据一共有 {{ total }} 条</el-alert
      >

      <!-- 这是表格 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="subjectName" label="所属学科"> </el-table-column>
        <el-table-column prop="directoryName" label="目录名称">
        </el-table-column>
        <el-table-column prop="username" label="创建者"> </el-table-column>
        <el-table-column prop="addDate" label="创建日期" width="250">
          <template slot-scope="scope">
            {{ editTime(scope.row.addDate) }}
          </template>
        </el-table-column>
        <el-table-column prop="totals" label="面试题数量"> </el-table-column>
        <el-table-column prop="state" label="状态">
          <template slot-scope="scope">
            {{ scope.row.state ? '已启用' : '已禁用' }}
          </template>
        </el-table-column>
        <el-table-column prop="totals" label="操作" width="250">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="openState(scope.row)">
              {{ scope.row.state ? '启用' : '禁用' }}
            </el-button>
            <el-button
              type="text"
              size="small"
              @click="updateSub(scope.row)"
              :disabled="!scope.row.state"
              >修改</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="deleteSub(scope.row)"
              :disabled="!scope.row.state"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页功能 -->
      <!-- current-page: 表示当前页数   page-size: 表示每页显示多少条   -->
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum.page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pageNum.pagesize"
          layout="prev, pager, next, sizes, jumper"
          :total="total"
        >
        </el-pagination>
      </div>

      <!-- 修改学科的Dialog -->
      <el-dialog
        :title="isEdit ? '修改学科' : '添加学科'"
        :visible.sync="dialogVisible"
        width="500px"
      >
        <subDialog
          v-if="dialogVisible"
          :row="row"
          @scucces="scucces"
          :is-edit="isEdit"
          :visible.sync="dialogVisible"
        ></subDialog>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { list, detail, remove, changeState } from '@/api/hmmm/directorys'
// 格式化时间
import { parseTime } from '@/utils/index'
// Dialog
import subDialog from '../components/directorys-add.vue'

export default {
  components: {
    subDialog
  },
  data () {
    return {
      subInput: '',
      tableData: [],
      pageNum: {
        page: 1, // 每页几条
        pagesize: 5, // 要切换每页的条目数
        state: null,
        directoryName: null,
        subjectID: null
      },
      total: 0,
      dialogVisible: false,
      row: {},
      isEdit: false,
      disabledNiu: false,
      aa: '',
      isShow: false
    }
  },
  created () {
    this.loadSub()
    // console.log(this.$route.query, 222)
    this.pageNum.subjectID = this.$route.query.id
    this.loadSub()
    if (this.pageNum.subjectID) {
      this.isShow = true
    }
  },
  methods: {
    // 渲染数据列表
    async loadSub () {
      const res = await list(this.pageNum)
      // console.log(res, 77777777)
      this.tableData = res.data.items
      // 总条数
      this.total = res.data.counts
      this.isTure = res.data.state
      console.log(res.data, 12312)
    },
    // 格式化时间
    editTime (time) {
      return parseTime(time, '')
    },
    // 搜索
    async search () {
      this.pageNum.subjectID = null
      const res = await list(this.pageNum)
      console.log(res, 2222)
      this.loadSub()
    },
    // 分页的功能
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.pageNum.pagesize = val
      this.loadSub()
    },
    // 分页的功能
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.pageNum.page = val
      this.loadSub()
    },
    // 删除
    deleteSub (data) {
      // console.log(data)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await remove(data)
          if (res.status !== 200) return
          // console.log(this.tableData)
          if (this.tableData.length === 1 && this.pageNum.page > 1) {
            this.pageNum.page--
            this.loadSub()
          }
          // 重新渲染
          this.loadSub()

          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 修改
    async updateSub (data) {
      this.isEdit = true
      console.log(data, 28282)
      const res = await detail(data)
      console.log(res, 1234231423)
      this.dialogVisible = true
      this.$nextTick()
      this.row = data
    },
    // 刷新页面
    scucces () {
      this.dialogVisible = false
      this.loadSub()
    },
    // 新增
    addSub () {
      this.row = {}
      this.isEdit = false
      this.dialogVisible = true
    },
    // 状态
    async openState (row) {
      row.state === 1 ? (row.state = 0) : (row.state = 1)
      const res = await changeState(row)
      // console.log(res)
      if (res.data.success) {
        // row.state = !row.state
        this.loadSub()
      }
    },
    // 清除
    resetForm () {
      this.pageNum.directoryName = ''
      this.pageNum.state = ''
    }
  }
}
</script>
<style scoped lang="scss">
.clearfix {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.subName {
  font-size: 14px;
  font-weight: 700;
  color: #606266;
}

.subInput {
  width: 200px;
  margin: 0 10px;
}

.pagination {
  margin-top: 30px;
  text-align: right;
}

::v-deep .el-icon-info {
  font-size: 16px;
}

.select {
  margin: 0 10px;
}
</style>
